<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>本年借出还入数</title>
    <script src="preview/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/countUp.js"></script>

    <style>
        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
        address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
        var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
            margin: 0;
            padding: 0;
            border: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        html,body{width: 100%;height: 100%}
        body{font-family: MicrosoftYaHei;font-size:0.18rem;color:#fcfcfb;text-align: justify;background: url(preview/img/bg.png);background-size:100% 100%;}
        ::-webkit-scrollbar{width: 0;}
        h1,h2,h3,h4,h5,h6 {font-size: 100%; }
        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
        input,textarea{ margin: 0;padding: 0;outline: 0;-webkit-appearance: none;border-radius: 0;font-family: "Microsoft YaHei";}
        a,a:link,a:visited,a:hover,a:active {text-decoration: none; -webkit-tap-highlight-color: transparent;}
        table {border-collapse: separate;border-spacing: 0;}
        ol,ul,li { list-style: none;}
        i{ont-style: normal;}
        .fl{float: left;}.fr{float: right;}
        /*单行文本省略号*/
        .words1 {display: -webkit-box;display: box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
        /*弹性布局水平垂直居中 兼容性高  font-family: MicrosoftYaHei;  */
        .xycenterbox{
            display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
            display: -moz-box; /* 老版本语法: Firefox (buggy) */
            display: -ms-flexbox; /* 混合版本语法: IE 10 */
            display: -webkit-flex; /* 新版本语法: Chrome 21+ */
            display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
            -webkit-box-pack: center;
            -moz-justify-content: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -moz-align-items: center;
            -webkit-align-items: center;
            align-items: center;
        }
        /*弹性布局水平居中 兼容性高*/
        .xcenterbox{
            display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
            display: -moz-box; /* 老版本语法: Firefox (buggy) */
            display: -ms-flexbox; /* 混合版本语法: IE 10 */
            display: -webkit-flex; /* 新版本语法: Chrome 21+ */
            display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
            -webkit-box-pack: center;
            -moz-justify-content: center;
            -webkit-justify-content: center;
            justify-content: center;
        }
        /*弹性布局垂直居中 兼容性高*/
        .ycenterbox{
            display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
            display: -moz-box; /* 老版本语法: Firefox (buggy) */
            display: -ms-flexbox; /* 混合版本语法: IE 10 */
            display: -webkit-flex; /* 新版本语法: Chrome 21+ */
            display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
            -webkit-box-align: center;
            -moz-align-items: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .clearfix::before, .clearfix::after {content: ""; display: block;height: 0;line-height: 0;clear: both;visibility: hidden;}
        .clearfix:after {content: "";display: block;height: 0; clear: both;visibility: hidden;}
        .clearfix:after {clear: both;}
        .clearfix {zoom: 1;}
        /*以上是页面初始化样式*/
        .yh_year{width: 100%;height:9rem;font-size:0.18rem;color:#fff;padding-top:0.1rem;}
        .area_clickRank {width: 38%;}
        .barBox {width: 100%;height: 0.9rem;white-space: nowrap;}
        .areaName{ margin-right:0.08rem;}
        .area{
            width: 100%;
            height: 0.9rem;
            line-height: 0.9rem;
            font-size:0.32rem;
            overflow: hidden;
            white-space: nowrap;
            letter-spacing: 0.02rem;
            text-align: center;
        }

        .barWrap {
            margin-right: .13rem;
            width: 72%;
            height: 0.2rem;
            /*background-color: rgba(255,255,255,0.3);*/
            /*box-shadow: 0 0.01rem 0.02rem 0*/
            /*rgba(255, 255, 255, 0.65),*/
            /*inset 0 0.02rem 0.01rem 0*/
            /*rgba(3, 46, 108, 0.68);*/
            -webkit-border-radius:0.05rem;
            -moz-border-radius:0.05rem;
            border-radius:0.05rem;
            background-color: #074568;
            box-shadow: 1px 1px 5px #fff;

        }
        .bar{
            height: 0.25rem;
            margin-top: -0.025rem;
            /*background: -webkit-linear-gradient(left, #dd1464 , #f539b9); /!* Safari 5.1 - 6.0 *!/*/
            /*background: -o-linear-gradient(right, #dd1464 , #f539b9); /!* Opera 11.1 - 12.0 *!/*/
            /*background: -moz-linear-gradient(right, #dd1464 , #f539b9); /!* Firefox 3.6 - 15 *!/*/
            /*background: linear-gradient(to right, #dd1464 , #f539b9); /!* 标准的语法（必须放在最后） *!/*/
            background: linear-gradient(to right, #1367cd , #4097f8);

            /*background: linear-gradient(to bottom, #dd1464, #f539b9);*/

            border-radius:0 0.07rem 0.07rem 0;
        }
        .area_clickNum{
            letter-spacing: 0.015rem;
            white-space: nowrap;
            display:block;
            width: 1.7rem;
            text-align: left;
            font-size: 0.32rem;
        }
        .box1{margin-left: 0.5rem;}
        .box1 .barWrap{transform: rotateY(180deg);position: relative;}
        .box1 .area_clickNum{margin-right:0.15rem;text-align: right;}
        h3{text-align: center;font-size:0.5rem;letter-spacing: 0.02rem;margin-bottom:0.3rem;padding-top:0.3rem;}
        .yearTitle{padding: 0 2rem;}
        .yearTitle div{font-size:0.4rem;line-height:0.6rem;text-align: left;margin-bottom:0.3rem;}
        .yearTitle span{color:#abd0fd;font-family: AdobeHeitiStd-Regular}
        .yearTitle span b{color:#fff;}

    </style>
</head>
<body>
<div class="yh_year">
    <h3>城市书房本年借出还入数</h3>
    <!--<div class="yearTitle clearfix">-->
        <!--<div class="yearOut fl">本年借出<span> （总数: <b>68969858</b>）</span></div>-->
        <!--<div class="yearIn fr" style="text-align: right;">本年还入 <span>（总数: <b>68969885</b>）</span></div>-->
    <!--</div>-->
    <div class="box1 area_clickRank fl"></div>
    <div class="areaName fl">
        <!--<div class="area">余杭总馆</div>-->
        <!--<div class="area">塘栖镇分馆</div>-->
        <!--<div class="area">余杭街道分馆</div>-->
        <!--<div class="area">仓前街道分馆</div>-->
        <!--<div class="area">乔司街道分馆</div>-->
        <!--<div class="area">南苑街道分馆</div>-->
        <!--<div class="area">临平街道分馆</div>-->
        <!--<div class="area">中泰街道分馆</div>-->
        <!--<div class="area">良渚街道分馆</div>-->
        <!--<div class="area">径山镇分馆</div>-->
    </div>
    <div class="box2 area_clickRank fl"></div>
</div>
</body>
<script>
    function randomData() {
        return Math.round(Math.random()*100000);
    }
    function getRem(prem,pwidth){
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth/pwidth*prem + "px";
        return oWidth/pwidth*prem;
    }
    window.onresize = function(){
        getRem(100,1440);
    };
    window.onload = function(){
        getRem(100,1440);
        /////自己模拟的数据 total 是每个数据的基数 可能每个分馆数据差别大，所以设置了每个分馆计算柱状条比例的基数
        var clickArr=[
            {"name":"维扬路","total":8000000,"borrowOut":6516000,"borrowIn":6616000},
            {"name":"广陵新城","total":1000000,"borrowOut":145632,"borrowIn":136598},
            {"name":"街南书屋","total":1000000,"borrowOut":269874,"borrowIn":286563},
            {"name":"经济开发区","total":1000000,"borrowOut":356985,"borrowIn":365626},
            {"name":"虹桥坊","total":1000000,"borrowOut":487569,"borrowIn":463254},
            {"name":"仁丰里","total":1000000,"borrowOut":585694,"borrowIn":574586},
            {"name":"上院","total":1000000,"borrowOut":645126,"borrowIn":654236},
            {"name":"自在公园","total":1000000,"borrowOut":756985,"borrowIn":785263},
            {"name":"三湾","total":1000000,"borrowOut":874123,"borrowIn":852365},
            {"name":"绿地","total":1000000,"borrowOut":956985,"borrowIn":985263},
            {"name":"邗江","total":1000000,"borrowOut":106985,"borrowIn":105263},
            {"name":"市民中心","total":1000000,"borrowOut":116985,"borrowIn":115263},
            {"name":"振兴花园学校","total":1000000,"borrowOut":126985,"borrowIn":125263},
            {"name":"STARRY","total":1000000,"borrowOut":136985,"borrowIn":135263},
            {"name":"万科","total":1000000,"borrowOut":146985,"borrowIn":145263},
            {"name":"陈集","total":1000000,"borrowOut":156985,"borrowIn":155263},
            {"name":"半岛","total":1000000,"borrowOut":166985,"borrowIn":165263},
            {"name":"荷花池","total":1000000,"borrowOut":176985,"borrowIn":175263},
            {"name":"曲江街办","total":1000000,"borrowOut":186985,"borrowIn":185263},
            {"name":"明月湖","total":1000000,"borrowOut":196985,"borrowIn":195263},
            {"name":"四望亭","total":1000000,"borrowOut":206985,"borrowIn":205263},
            {"name":"扬子津","total":1000000,"borrowOut":216985,"borrowIn":215263}
        ];
        var startIndex=-8,endIndex,index=-1;
        var showNumber=8;
        var totalPage = clickArr.length % showNumber == 0 ? clickArr.length / showNumber : parseInt(clickArr.length / showNumber) + 1;   //总共几页
        /////渲染借出数据
        function move(){
            $('.box1').html('');
            $('.box2').html('');
            $('.areaName').html('');
            index++;
            if(index>=totalPage){
                index=0;
            }
            startIndex=index*showNumber;
            endIndex=(index+1)*showNumber;
            endIndex=endIndex>=clickArr.length?clickArr.length:endIndex;
            new CountUp( $('.yearOut b'), 0,6896985, 0, 2).start();
            new CountUp( $('.yearIn b'), 0,6896985, 0, 2).start();
            var str1='',str2='',area='';
            for (var i = startIndex; i < endIndex; i++) {
                area='<div class="area">'+clickArr[i].name+'</div>';
                str1='<div class="barBox xycenterbox">'+
                        '<span class="area_clickNum"></span>'+
                        '<div class="barWrap"><div class="bar"></div></div>'+
                        '</div>';
                str2='<div class="barBox xycenterbox">'+
                        '<div class="barWrap"><div class="bar"></div></div>'+
                        '<span class="area_clickNum"></span>'+
                        '</div>';
                $('.box1').append(str1);
                $('.box2').append(str2);
                $('.areaName').append(area);
                $('.box2 .area_clickNum:eq('+(i-startIndex)+')').html(clickArr[i].borrowIn);
                new CountUp($('.box2 .area_clickNum:eq('+(i-startIndex)+')'), 0, clickArr[i].borrowIn, 0, 2).start();
                $('.box2 .bar:eq('+(i-startIndex)+')').width(0).animate({
                    width : clickArr[i].borrowIn/clickArr[i].total*100+"%"
                },2000,"swing");

                $('.box1 .area_clickNum:eq('+(i-startIndex)+')').html(clickArr[i].borrowOut);
                new CountUp($('.box1 .area_clickNum:eq('+(i-startIndex)+')'), 0, clickArr[i].borrowOut, 0, 2).start();
                $('.box1 .bar:eq('+(i-startIndex)+')').width(0).animate({
                    width : clickArr[i].borrowOut/clickArr[i].total*100+"%"
                },2000,"swing");
            }
        }
        move();
        setInterval(function() {
            move();
        },15000);

    }


</script>
</html>
